<template>
  <div class="commonHeader">
    <div class="left">
      <img src="@/assets/logo.png" alt="">
    </div>
    <div class="panelBox tabBox">
      <div class="tab" v-for="item in tabList">
        <div class="tabTitle fontFamilyMedium" :class="{active: $route.path == item.route}" @click="toOther(item.route)">{{item.title}}
        </div>
        <div class="dropdownList" v-if="item.children.length">
          <div class="dropdownItem fontFamilyMedium" :class="{active: $route.path == subItem.route}" v-for="subItem in item.children"
               @click="toOther(subItem.route)">
            {{subItem.title}}
          </div>
        </div>
      </div>
    </div>
    <div class="right">
<!--      <zy-button>免费试用</zy-button>-->
      <zy-button @click="toLogin">企业登录</zy-button>
    </div>
  </div>
</template>

<script>
	export default {
		name: "commonHeader",
		data() {
			return {
				tabList: [
					{title: '首页', route: '/', children: []},
					{
						title: '产品服务', route: '', children: [
							{title: '灵活用工', route: '/flexible'},
							{title: '个体工商户', route: '/self'},
							{title: '立减金', route: '/ljj'},
						]
					},
					// {title: '解决方案', route: '', children: []},
					// {title: '税筹咨询', route: '', children: []},
					{title: '关于平台', route: '/about', children: []},
				]
			};
		},
		computed: {},
		methods: {
			toOther(path) {
				path ? this.$router.push({path}) : '';
			},
			toLogin(){
				window.open('https://sc.yeeshui.com/#/login')
      }
		},
		watch: {},
		mounted() {
		},
		created() {
		}
	}
</script>

<style scoped lang="less" src="@/style/commonHeader/index.less">

</style>
